<template>
	<view>
		<!-- 		<view class="header">
			<view class="myrelease" :class="{bg:time == 3}" @click="changebg(3)">我的发布</view>
			<view class="myorder" :class="{bg:time == 4}" @click="changebg(4)">我的订单</view>
		</view> -->
		<view class="body">
			<view class="box" v-for="(item, index) in list" key="idnex">
				<view class="photo" v-if="item.urlList.length!==0">
					<image :src="item.urlList[0]" mode=""></image>
				</view>
				<view class="photo" v-if="item.urlList.length===0">
					<image src="https://lnu-market.oss-cn-guangzhou.aliyuncs.com/2022-11-06/15:43:03-0c8a8b6963ed41d1b094c2b9aae300b9.jpg" mode=""></image>
				</view>
				<view class="info">
					<view class="name">
						{{item.title===''?'无标题':item.title}}
					</view>
					<view class="describe">
						描述：{{item.description===''?'无产品描述':item.description}}
					</view>
					<view class="bottombox">
						<view class="price">
							￥{{item.price === '' ? '用户未设置价格' : item.price}}
						</view>
						<!-- <view class="delet"> -->
						<!-- <image src="../../static/delet.png" mode=""></image> -->
						<!-- 						删除
								</view> -->
					</view>
					<view class="setting">
						<view class="status">
							<!-- {{item.status}} -->
								{{item.status === 1 ? '已上架' : item.status === 2 ? '已售出' : item.status === 3 ? '已下架' : item.status === 4 ? '审核驳回' : '未知状态'}}
						</view>
						<!-- 						<view class="shelves">
							<button class="change">上架</button>
						</view> -->
						<view class="offshelves">
							<button class="mini-btn change" type="default" size="mini" @click="show(item.gid)" v-if="item.status === 2 ? false : true" >已售出</button>
						</view>
						<!-- 						<view class="Sell">
							已售出
						</view> -->
					</view>
				</view>
			</view>
			<luanqing-empty show="true" text="没有更多数据啦" textColor="#000"></luanqing-empty>

		</view>
	</view>
</template>

<script>
	import myissue from '@/pages/trading/myissue.vue'
	import {
		apiGetPostByUserId,apiDownSoldPost
	} from '@/utils/request/api.js'

	export default {
		data() {
			return {
				time: 3,
				list: [],
				gid:'',
				params:{
					pageNum:1,
					pageSize:10,
					postType:1,
					userId: '202108764312'
				}

			}
		},
		components: {
			myissue
		},
		onLoad() {
			apiGetPostByUserId(this.params).then(res => {
				this.list=res.data
				console.log(res.data);
			}).catch(err => {
				console.log(err);
			})
		},
		methods: {
			changebg(index) {
				if (index === 3 || index === 4) {
					this.time = index

				}
			},
			show(e) {
				uni.showModal({
					// title: "",
					content: '确定将此商品改为已售出吗',
					// showCancel: false,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							apiDownSoldPost({
								gid:e
							}).then(res=> {
								console.log(res);

							}).catch(err=> {
								console.log(err);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.myrelease {
		display: inline-block;
		width: 90%;
		height: 50px;
		font-size: 20px;
		font-weight: 500;
		text-align: center;
		/* margin-top: 20px; */
		margin: 20px 10px;
	}

	.myorder {
		display: inline-block;
		width: 50%;
		height: 50px;
		font-size: 20px;
		font-weight: 500;
		text-align: center;
		margin-top: 20px;
	}

	.bg {
		border-bottom: 2px solid #00a8cc;
	}

	.box {
		position: relative;
		display: flex;
		width: 95%;
		height: 100px;
		margin: 10px 2%;
		background-color: #f3faff;
		border-radius: 20px;
	}

	.photo {
		display: inline-block;
		width: 25%;
		height: 90%;
		margin: 2%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10px;
		}
	}

	.info {
		display: inline-block;
		width: 50%;
		height: 100%;
		margin-left: 2·px;
	}

	.name {
		width: 110px;
		height: 28px;
		// text-align: center;
		margin-top: 1px;
		font-size: 18px;
		font-weight: 400;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.describe {
		font-size: 15px;
		color: #aeaeae;
		height: 40px;
		width: 70%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.bottombox {
		display: flex;
		margin: 2px 0 0 0;

		.price {
			display: inline-block;
			// float: right;
			width: 90%;
			color: rgb(255, 85, 0);
			font-size: 18px;
			// margin-top: 7px;
		}

		.delet {
			display: inline-block;
			width: 20%;
			height: 30px;
			margin-left: 20px;
			color: #aeaeae;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.setting {
		position: absolute;
		top: 0;
		right: 0;
		margin: 10px;




	}

	.status {
		color: #00a8cc;
		font-size: 20px;
		font-style: italic;
	}

	.change {
		// width: 60px;
		// font-size: 18px;
		// font-weight: normal;
		// height: 30px;
		margin: 10px 0;
		background-color: #57cdff;
		border-radius: 10px;
		border: 0;
	}

	.change:active {
		// background-color: #7de3ff;
	}
</style>
